<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图文混排网页</title>
    <style>
        h2 {
            text-align: center;
            font-size: 36px;   
            color: #666;
            /* 字符间距 */
            letter-spacing: 10px;
        }
        .span01 {
            color: #076BBC;
        }
        .p1 {
            text-align: center;
            /* 字体 */
            font-family: "楷体";
            color: #666;
        }
        p {
            /* 行高是字体大小的1.5倍 */
            line-height: 1.5;
        }
        .p2 {
            text-align: center;
            /* 倾斜 */
            font-style: italic;
        }
    </style>
</head>
<body>
    <h2>网页<span class="span01">排版布局</span>原则及特点</h2>
    <p class="p1">更新时间：<span style="color: #F00;">2021年09月05日16时17分</span>&nbsp;&nbsp;&nbsp;来源：空间网络</p>
    <img src="./素材/素材10月11日/changcheng.png" width="485" height="303" align="left" hspace="30">
    <p>
        &hearts;&nbsp;图文平衡性。平衡性是指文字、图像等要素的占用空间分布均匀，而且色彩协调，
        给人以平稳、舒服的感觉，满足客户的感官感受。任何没有达到平衡性的元素，均会造成视觉上的排斥。
    </p>
    <p>
        &hearts;&nbsp;内容对称性。并非要求设计者将所有内容统一对称，而是建议打破传统对称的方法，
        避免呆板、死气沉沉的感觉；在适当的时候产生一些变化，会有不一样的效果，对称也是一种美。
    </p>
    <p>
        &hearts;&nbsp;布局疏密度。留白是一种巧妙的技巧，在疏密度中可以体现。疏密度是指整个网页不要只用一种样式，
        要适当留白，运用空格，改变行距、字距等，从而产生一些变化。要做到疏密有度，即“密不透风，疏可跑马”。
    </p>
    <p>
        &hearts;&nbsp;视觉对比性。对比指的是从不同的色调、色彩、形态等技巧进行表现，
        从而形成鲜明的视觉效果。如果开发者注重这项网站开发技巧，就能够创造出富有变化的页面效果。
    </p>
    <p>
        &hearts;&nbsp;合理的布局比例。对布局而言，适当的比例非常重要，虽然比例的数值不一定为黄金分割比的数值，
        但实际的比例务必协调，否则页面就会显得混乱，参差不齐，影响效果。
    </p>
    <hr>
    <p class="p2">原文链接：<span style="color: #F00;">https://baijiahao***.baidu.com</span>&nbsp;&nbsp;&nbsp;;文章来源：<span style="color: #F00;">百家号</span></p>
</body>
</html>

<!-- 范围标签：<span></span> -->